{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="{% static 'layui/css/layui.css' %}" rel="stylesheet">
    <link href="{% static 'css/main.css' %}" rel="stylesheet">
</head>
<body id="index">
<div id="nav-placeholder">
    <nav style="width: 220px;height: 100%;color: #fff; background-color: RGBA(33,37,41,var(--bs-bg-opacity,1))!important">
        <div class="logo">
            <div class="logo-image">
                <img src="../static/images/logo.gif" />
            </div>
            <div class="logo-title"></div>
        </div>
        <ul class="layui-nav layui-nav-tree" lay-filter="test" style="width: 220px">
            {% if "首页" in user.menuList %}
            <li class="layui-nav-item menu-item layui-this" data-page="home"><a href="/home/?userId={{user.userId}}">首页</a></li>
            {% endif %}
            {% if "用户管理" in user.menuList %}
            <li class="layui-nav-item menu-item" data-page="users"><a href="/users/?userId={{user.userId}}">用户管理</a></li>
            {% endif %}
            {% if "后台管理" in user.menuList %}
            <li class="layui-nav-item menu-item" data-page="role"><a href="/admin/?userId={{user.userId}}" target="_blank">后台管理</a></li>
            {% endif %}
            {% if "任务中心" in user.menuList %}
            <li class="layui-nav-item menu-item" data-page="task"><a href="/task/?userId={{user.userId}}">任务中心</a></li>
            {% endif %}
            <li class="layui-nav-item menu-item" data-page="center"><a href="/center/?userId={{user.userId}}">用户中心</a></li>
            <li class="layui-nav-item menu-item" data-page="heat"><a href="/heat/?userId={{user.userId}}">热度分析</a></li>
            <li class="layui-nav-item menu-item" data-page="jobs"><a href="/jobs/?userId={{user.userId}}">智能岗位推荐</a></li>
        </ul>
    </nav>
</div>
<div class="content" style="padding: 0">
    <div id="header-placeholder" style="background-color: #fff;">
        <div class="header-menu">
            <div style=" padding: 10px">
                <i class="layui-icon layui-icon-home" style="margin-right: 10px"></i> 首页
            </div>
            <div class="user-info" style="display: flex;align-items: center">
              <dvi id="userinfo">
                {{ user.userName }}
                <i class="layui-icon layui-icon-down layui-font-12"></i>
                  <div id="drop-menu" style="display: none">
                      <ul>
                          <li><a href="/login/">退出登录</a></li>
                          <li><a href="/center/?userId={{user.userId}}">个人中心</a></li>
                      </ul>
                  </div>
              </dvi>
            </div>
        </div>
        <div class="header-tab" style="border-top: 1px solid #dedede">
            <div class="breadcrumb" style="padding: 10px">
        <span class="layui-breadcrumb" lay-separator="|">
          <a href="/home/?userId={{user.userId}}"><i class="layui-icon layui-icon-return" style="margin-right: 10px"></i>BACK</a>
          <a><cite>首页</cite></a>
        </span>
            </div>
        </div>
    </div>
    <div id="main-placeholder">
        <div class="total layui-bg-gray">
            <div class="layui-card">
                <div class="layui-card-header">岗位数</div>
                <div class="layui-card-body">
                    699
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">系统注册人数</div>
                <div class="layui-card-body">
                    400
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">报名人数</div>
                <div class="layui-card-body">
                    300015
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">招考单位数</div>
                <div class="layui-card-body">
                    156
                </div>
            </div>
            <!-- <div class="layui-card">
                <div class="layui-card-header">注册人数</div>
                <div class="layui-card-body">
                    400
                </div>
            </div> -->
        </div>
        <div class="charts">

            <div class="chart-row">
                <div class="layui-card chart-item" style="height: 360px">
                    <div class="layui-card-header">饼图-24年各区县招考岗位数</div>
                    <div class="layui-card-body">
                        <div id="bing" style="width: 100%; height: 300px"></div>
                    </div>
                </div>
                <div class="layui-card chart-item" style="height: 360px">
                    <div class="layui-card-header">条形图-学历-岗位数</div>
                    <div class="layui-card-body">
                        <div id="tiao" style="width: 100%; height: 300px"></div>
                    </div>
                </div>
            </div>
            <div class="chart-row">
                <div class="layui-card chart-item" style="height: 360px">
                    <div class="layui-card-header">折线图 2020-2024年报考人数</div>
                    <div class="layui-card-body">
                        <div id="zhexian" style="width: 100%; height: 300px"></div>
                    </div>
                </div>

                <div class="layui-card chart-item" style="height: 360px">
                    <div class="layui-card-header">柱形图-2020-2024招考岗位数</div>
                    <div class="layui-card-body">
                        <div id="zhu" style="width: 100%; height: 300px"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div id="footer-placeholder"></div>
</div>

</body>
<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script src="{% static 'js/echarts.min.js' %}"></script>
<script src="{% static 'layui/layui.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<script src="{% static 'js/wordcloud2.js' %}"></script>
<script>

    // 第三，折线图
    var myChart = echarts.init(document.getElementById("zhexian"));
    let newArr = [];
    // let curtimedata = [2.4, 2.4, 1.7, 2.3]
    // let pasttimedata = [2.3, 2.1, 1.9, 2.1];
    let curtimedata = [9600, 11500, 12900, 14500]
    let pasttimedata = [9500, 11800, 14900, 17500];

    newArr = curtimedata.concat(pasttimedata);

    // 计算最小值和最大值，并保留一定的间距
    let min = Math.min(...newArr) - 1000; // 减去一定的值来留出间距
    let max = Math.max(...newArr) + 1000; // 加上一定的值来留出间距

    // 设置合适的刻度间隔
    let interval = Math.floor((max - min) / 5); // 根据数据范围设置刻度间隔

    option = {
        xAxis: {
          type: 'category',
          data: ['2020', '2021', '2022', '2023', '2024']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [17736, 18012, 12249, 15141, 18370],
            type: 'line'
          }
        ]
    };
    myChart.setOption(option);


    // 第四，柱状图
    let zhuChart = echarts.init(document.getElementById('zhu'));

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
            type: 'category',
            data: ['2019年', '2020年', '2021年', '2022年', '2023年', '2024'],
            axisTick: {
                alignWithLabel: true
            }
            }
        ],
        yAxis: [
            {
            type: 'value'
            }
        ],
        series: [
            {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [313, 291, 564, 305, 362, 670]
            }
        ]
    };
    zhuChart.setOption(option);

    // 第二 条形图
    let tiaoChart = echarts.init(document.getElementById('tiao'));
    option = {
        color: ['#08daaa', '#6571fc', '#ffd813', '#b8bcca'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
            },
        },
        legend: {
            data: ['本科', '专科', '研究生'],
            bottom:'10',
        },
        grid: {
            left: '3%',
            right: '4%',
            containLabel: true,
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                show: false, //隐藏文字
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false, //隐藏X轴刻度
            },
            axisLine: {
                show: false, //隐藏X轴线
            },
        },
        yAxis: {
            type: 'category',
            axisLine: {
                show: false, //隐藏X轴线
            },
            axisTick: {
                show: false, //隐藏X轴刻度
            },

            data: [
                '2020',
                '2021',
                '2022',
                '2023',
                '2024'
            ],
        },
        series: [

            {
                name: '本科',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true,
                },
                emphasis: {
                    focus: 'series',
                },
                data: [369,936,345,356,822],
            },
            {
                name: '专科',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true,
                },
                emphasis: {
                    focus: 'series',
                },
                data: [481,150,55,182,359],
            },
            {
                name: '研究生',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true,
                },
                emphasis: {
                    focus: 'series',
                },
                data: [0,0,6,7,8,],
            },
        ],
    };

    tiaoChart.setOption(option);



    // 第一饼图
    let bingChart = echarts.init(document.getElementById('bing'));
    option = {
        legend: { show: false },
        series: [
            {
                name: '单位招考人数',
                type: 'pie',
                radius: ['40%', '60%'],
                avoidLabelOverlap: true,
                itemStyle: { borderColor: '#fff', borderWidth: 2 },
                color: [
                    '#52A8FF',
                    '#00B389',
                    '#E27272',
                    '#FFC53D',
                    '#006EFE',
                    '#F5855F',
                    '#C099FC',
                    '#FFA940',
                    '#29EFC4',
                    '#F8AEA4',
                ],
                label: {
                    // alignTo: 'labelLine', // ! 文字对齐方式
                    formatter: function (e) {
                        let {
                            data: { value, name, percent },
                        } = e;
                        return `{x|}{a|${name}}\n{b|${value}个}{c|${percent}}`;
                    },
                    minMargin: 5,
                    lineHeight: 15,
                    rich: {
                        x: { width: 10, height: 10, backgroundColor: 'inherit', borderRadius: 5 },
                        a: { fontSize: 14, color: 'inherit', padding: [0, 20, 0, 8] },
                        b: { fontSize: 12, align: 'left', color: '#666666', padding: [8, 0, 0, 18] },
                        c: { fontSize: 12, align: 'left', color: '#666666', padding: [8, 0, 0, 8] },
                    },
                },
                data: [
                    // {'value': 1, 'name': '市直属', 'percent': '28.91%'},
                    // {'value': 2, 'name': '馆陶县', 'percent': '7.52%'},
                    // {'value': 3, 'name': '武安市', 'percent': '7.02%'},
                    // {'value': 4, 'name': '临漳县', 'percent': '7.02%'},
                    // {'value': 5, 'name': '肥乡区', 'percent': '6.85%'},
                    // {'value': 6, 'name': '大名县', 'percent': '5.85%'},
                    // {'value': 7, 'name': '成安县', 'percent': '5.68%'},
                    // {'value': 8, 'name': '峰峰矿区', 'percent': '5.35%'},
                    // {'value': 9, 'name': '广平县', 'percent': '4.85%'},
                    // {'value': 10, 'name': '永年区', 'percent': '4.68%'},
                    // {'value': 11, 'name': '曲周县', 'percent': '4.18%'},
                    // {'value': 12, 'name': '丛台区', 'percent': '4.01%'},
                    // {'value': 13, 'name': '魏县', 'percent': '3.84%'},
                    // {'value': 14, 'name': '涉县', 'percent': '3.34%'},
                    // {'value': 15, 'name': '邯山区', 'percent': '2.67%'},
                    // {'value': 16, 'name': '磁县', 'percent': '2.51%'},
                    // {'value': 17, 'name': '邱县', 'percent': '2.51%'},
                    // {'value': 18, 'name': '复兴区', 'percent': '1.84%'},
                    // {'value': 19, 'name': '鸡泽县', 'percent': '1.84%'},
                    // {'value': 20, 'name': '邯郸经济技术开发区', 'percent': '1.34%'}
                    {'value': 173, 'name': '市直属', 'percent': '25.86%'},
                    {'value': 45, 'name': '馆陶县', 'percent': '6.73%'},
                    {'value': 42, 'name': '武安市', 'percent': '6.28%'},
                    {'value': 42, 'name': '临漳县', 'percent': '6.28%'},
                    {'value': 41, 'name': '肥乡区', 'percent': '6.13%'},
                    {'value': 35, 'name': '大名县', 'percent': '5.23%'},
                    {'value': 34, 'name': '成安县', 'percent': '5.08%'},
                    {'value': 32, 'name': '峰峰矿区', 'percent': '4.78%'},
                    {'value': 29, 'name': '广平县', 'percent': '4.33%'},
                    {'value': 28, 'name': '永年区', 'percent': '4.19%'},
                    {'value': 25, 'name': '曲周县', 'percent': '3.74%'},
                    {'value': 24, 'name': '丛台区', 'percent': '3.59%'},
                    {'value': 23, 'name': '魏县', 'percent': '3.44%'},
                    {'value': 20, 'name': '涉县', 'percent': '2.99%'},
                    {'value': 16, 'name': '邯山区', 'percent': '2.39%'},
                    {'value': 15, 'name': '邱县', 'percent': '2.24%'},
                    {'value': 15, 'name': '磁县', 'percent': '2.24%'},
                    {'value': 11, 'name': '鸡泽县', 'percent': '1.64%'},
                     {'value': 11, 'name': '复兴区', 'percent': '1.64%'},
                     {'value': 8, 'name': '邯郸经济技术开发区', 'percent': '1.20%'}

                ],
            },
        ],
    };

    bingChart.setOption(option);
</script>
</html>